<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>计算属性</title>
    </head>
    <div>

        <!--在 #first 元素内部书写根组件的模板(template)-->
        <div id="first">
            <div>
                <div v-html="infos"></div>
                <div>{{ totalPrice }}</div>
            </div>
        </div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>
            const options = {
                data() {
                    return {
                        items: [
                            { id: 1234, name: 'Java从入门到放弃', price: 99, count: 7 },
                            { id: 2233, name: 'Java从没入门到放弃', price: 88, count: 4 },
                            { id: 4321, name: '骗你学Vue之你行你上啊', price: 56, count: 1 },
                        ]
                    }
                },
                computed: {
                    totalPrice() {
                        return this.items.reduce( (p,b) => p + b.price * b.count , 0 );
                    },
                    infos() {
                        let str = '';
                        this.items.forEach( book => {
                            str += `<p>${book.id}, ${book.name}, ￥${book.price.toFixed(2)}, ${book.count}</p>`;
                        });
                        return str;
                    }
                }
            }

            // 解构赋值
            const { createApp } = Vue;
            // 创建应用
            const app = createApp( options );
            // 挂载应用
            app.mount( '#first' );
        </script>
    </div>
</html>